<template>
    <section class="school">
        <el-row class="header">

            <div class="section" style="overflow: hidden">
                <div class="head-left" style="display: flex;align-items: center">
                    <span class="school">{{formUnit.unit_name}}</span>
                    <div class="unit-info-manager">
                        <div>信息上报人: <span>{{itemForm.responsible_user_name|| '暂无'}}</span></div>
                        <div>联系方式: <span>{{itemForm.responsible_user_telephone || '暂无'}}</span></div>
                        <div>部门: <span>{{itemForm.responsible_user_belong_unit || '暂无'}}</span></div>
                        <div>职务: <span>{{itemForm.responsible_user_title|| '暂无'}}</span></div>
                        <el-button v-if="role === 0" type="primary" plain @click="changeManagerDialog" size="mini">更改信息上报人</el-button>
                    </div>
                </div>
                <!--0：管理员，1：专家，2高校-->
                <el-button type="primary" v-if="role === 0" @click="editInfo">编辑</el-button>
                <el-button v-if="role !== 2" @click="$router.go(-1)">返回</el-button>
                <div class="unit-info-manager" style="text-align:left;display: table;width: 100%; padding:0 20px;">
                    <div>省市: <span>{{itemForm.provinces || '--'}} / {{ itemForm.city || '--'}} </span></div>
                </div>
            </div>
            <el-col :span="24">
                <div class="title">
                    <span>概况</span>
                    <div class="head-right">
                        <span v-if="role===2">
                            <el-button type="success" size="mini" @click="handleSubmit" v-if="!disabled">保存</el-button>
                            <el-button type="primary" size="mini" @click="handleEdit(1)" v-if="disabled">编辑</el-button>
                            <el-button type="warning" size="mini" @click="handleEdit(0)" v-if="!disabled">取消</el-button>
                        </span>
                    </div>
                </div>
                <div>
                    <el-form :model="college_info" ref="college_info" :rules="collegeInfo"  label-width="100px" style="max-width:300px;" class="demo-fundProduct">
                        <el-form-item label="学校总数:" prop="college_count">
                            <el-input :disabled="disabled" v-model="college_info.college_count"/>
                        </el-form-item>
                        <el-form-item label="本科高校数:" prop="undergraduate_college_count">
                            <el-input :disabled="disabled" v-model="college_info.undergraduate_college_count"/>
                        </el-form-item>
                        <el-form-item label="教师总数:" prop="teacher_count">
                            <el-input :disabled="disabled" v-model="college_info.teacher_count"/>
                        </el-form-item>
                        <el-form-item label="学生总数:" prop="student_count">
                            <el-input :disabled="disabled" v-model="college_info.student_count"/>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>

        <el-dialog title="更信息上报人" :visible.sync="infoManagerDialogVisible"
                   width="600px" :before-close="infoManagerDialogHandleClose">
            <el-form :model="changeInfoManagerForm" label-width="100px" class="demo-fundProduct"
                     style="max-width:300px;">
                <el-form-item label="信息上报人:" prop="user_id">
                    <el-select filterable v-model="changeInfoManagerForm.responsible_user_id"
                               clearable　placeholder="请选择新的上报人">
                        <el-option :key="item.id" :label="item.full_name" :value="item.id"
                                   v-for="(item) in userOptionsList"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="infoManagerDialogVisible = false"> 取 消 </el-button>
                <el-button type="primary" @click="changeManagerSubmit"> 确 认 </el-button>
              </span>
        </el-dialog>
        <el-dialog title="编辑" :visible.sync="dialogEditInfoVisible"
                   width="600px" :before-close="editInfoHandleClose">
            <el-form :model="editInfoForm" :rules="editInfoRules" ref="editInfoForm" label-width="140px"
                     class="demo-fundProduct">
                <el-row>
                    <el-col :span="20" :push="1">
                        <el-input type="hidden" v-model="itemForm.id"></el-input>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20" :push="1">
                        <el-form-item label="教育主管部门名称:" prop="unit_name">
                            <el-input placeholder="请输入教育主管部门名称" type="text" v-model="editInfoForm.unit_name"></el-input>
                        </el-form-item>
                        <el-form-item label="所在省市:" prop="provinces" style="width:100%">
                            <!--<el-select filterable v-model="editInfoForm.provinces" clearable　placeholder="请选择主管部门所属省份">
                                <el-option :key="item" :label="item" :value="item"
                                           v-for="(item) in dict.provinces"></el-option>
                            </el-select>-->
                            <el-cascader
                                    placeholder="请选择所在省市"
                                    v-model="selecetProvincCity"
                                    :options="dict.provinc_city"
                                    :props="provincCityProps"
                                    @change="provincCityChange"></el-cascader>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">

                <el-button type="primary" @click="editInfoSubmit">保 存
                </el-button>
                <el-button @click="editInfoHandleClose">取 消</el-button>

            </div>
        </el-dialog>

    </section>
</template>

<script>
    import * as api from '../../api/auth_api.js';

    import {isNullTrue} from "../../common/js/commons";
    import dict from '../../common/js/dict'

    export default {
        components: {},
        data() {
            var validName = (rule, value, callback) => {
                // let reg = /^[a-zA-Z\u4e00-\u9fa5]{1,30}$/;
                // 高校名称只验证长度 30
                if (value.length > 30) {
                    callback(new Error('30位以内的汉字或字母'));
                } else if (value == '') {
                    callback(new Error('请输入教育主管部门名称'));
                } else {
                    callback();
                }
            };
            return {
                //dialog

                dialogVisible: false,
                dialogEditInfoVisible: false,
                infoManagerDialogVisible: false,
                dialogLoading: false,
                dialogTitle: '编辑',
                college_info:{
                    college_count:'',
                    undergraduate_college_count:'',
                    teacher_count:'',
                    student_count:''
                },
                backup_college_info:{},
                provincCityProps:{
                    value:'name',
                    label:'name',
                    children:'city'
                },
                selecetProvincCity: [],
                userOptionsList: [],
                changeInfoManagerForm: {
                    responsible_user_id: ''
                },
                editInfoForm: {
                    id: '',
                    unit_name: "",
                    provinces: "",
                    type: 2
                },
                editInfoRules: {
                    unit_name: [{required: true, message: '请输入教育主管部门名称', validator: validName, trigger: 'blur'}],
                    provinces: {required: true, message: '请选择主管部门所属省份', trigger: 'change'}
                },
                collegeInfo: {
                    college_count: [{required: true, message: '请输入学校总数', validator: validName, trigger: 'blur'}],
                    teacher_count: [{required: true, message: '请输入教师总数', validator: validName, trigger: 'blur'}],
                    student_count: [{required: true, message: '请输入学生总数', validator: validName, trigger: 'blur'}],
                    undergraduate_college_count: {required: true, message: '请输入本科高校数', trigger: 'blur'}
                },
                itemForm: {
                    id: '',
                    unit_name: "",
                    provinces: "",
                    city: ""
                },

                dict: dict,
                disabled: true,
                imageUrl: '',

                formUnit: {

                    name: '清华大学',
                    college_info: {
                        progress: [],
                    }

                }
            }
        },
        computed: {
            role() {
                let role_name = this.$store.state.userInfo.role_name || ''

                let role = 0

                //0：管理员，1：专家，2高校
                if (role_name.indexOf("管理员") > -1 || role_name.indexOf("教育部") > -1) {
                    role = 0
                } else if (role_name.indexOf("教育主管部门") > -1) {
                    role = 2
                } else {
                    role = 1
                }
                return role
            },
            unit_id() {
                let ids = null
                if (this.role === 2) {
                    ids = this.$store.state.userInfo.unit_id
                } else {
                    ids = this.$route.params.id
                }
                return ids
                // return this.$router.params.id || this.$store.state.userInfo.unit_id
            }
        },
        created() {

        },
        methods: {
            provincCityChange(val){
                this.editInfoForm.provinces = val[0]
                this.editInfoForm.city = val[1]
            },
            handleEdit(status){
                if(status){
                    this.disabled = false
                } else {
                    this.college_info = {
                        id:this.formUnit.college_info.id || '',
                        unit_id:this.formUnit.college_info.unit_id || '',
                        college_count:this.formUnit.college_info.college_count || '',
                        undergraduate_college_count:this.formUnit.college_info.undergraduate_college_count || '',
                        teacher_count:this.formUnit.college_info.teacher_count || '',
                        student_count:this.formUnit.college_info.student_count || ''
                    }
                    this.$refs['college_info'].clearValidate()
                    this.disabled = true
                }
            },
            editInfo() {
                this.dialogEditInfoVisible = true
                this.editInfoForm = {
                    id: this.itemForm.id,
                    unit_name: this.itemForm.unit_name,
                    provinces: this.itemForm.provinces,
                    city: this.itemForm.city,
                    type: 2
                }
                this.selecetProvincCity = [ this.itemForm.provinces, this.itemForm.city ]
            },
            editInfoHandleClose() {
                this.dialogEditInfoVisible = false
                this.selecetProvincCity = []
                this.editInfoForm = {
                    id: '',
                    unit_name: "",
                    provinces: "",
                    city: "",
                    type: 2
                }
            },
            handleSubmit() {
                this.$refs['college_info'].validate((valid) => {
                    if (valid) {
                        let params =  Object.assign({}, this.itemForm)
                            params.college_info = this.college_info
                        console.log(params)
                        api.updateUniversity(params).then((res) => {
                            if (res.data.status == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })
                                this.disabled = true
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.msg);
                                this.disabled = false;
                            }
                        })
                    }
                })
            },
            editInfoSubmit() {
                this.$refs['editInfoForm'].validate((valid) => {
                    if (valid) {
                        this.dialogEditInfoVisible = true;  //显示loading
                        api.updateUniversity(this.editInfoForm).then((res) => {
                            this.dialogEditInfoVisible = false;  //隐藏loading
                            if (res.data.status == 200) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功!'
                                })

                                this.editInfoHandleClose();
                                this.getInfo()
                            } else {
                                if (res.data.status == 401) {
                                    this.$router.push('/login');
                                }
                                this.$message.error(res.data.msg);
                                this.dialogVisible = false;
                            }
                        })
                    }
                });
            },
            getInfo() {
                api.universityInfo({id: this.unit_id}).then((res) => {
                    if (res.data.status == 200) {
                        let data = JSON.parse(res.data.datas)
                        this.formUnit = Object.assign({}, data)
                        this.itemForm = {
                            id: data.id,
                            unit_name: data.unit_name,
                            provinces: data.provinces,
                            city: data.city,
                            type: data.type || 2,
                            unit_logo: data.unit_logo,
                            belong: data.belong,
                            arts_type: data.arts_type,
                            responsible_user_telephone: data.responsible_user_telephone,
                            responsible_user_title: data.responsible_user_title,
                            responsible_user_name: data.responsible_user_name,
                            responsible_user_belong_unit: data.responsible_user_belong_unit,
                        }
                        this.college_info = {
                            id:this.formUnit.college_info.id || '',
                            unit_id:this.formUnit.college_info.unit_id || '',
                            college_count:this.formUnit.college_info.college_count || '',
                            undergraduate_college_count:this.formUnit.college_info.undergraduate_college_count || '',
                            teacher_count:this.formUnit.college_info.teacher_count || '',
                            student_count:this.formUnit.college_info.student_count || ''
                        }
                        if (this.formUnit.unit_logo) {
                            this.imageUrl = this.formUnit.unit_logo.path
                        }
                    } else {
                        if (res.data.status == 401) {
                            this.$router.push('/login');
                        }
                        this.$message.error(res.data.msg);
                    }
                })
            },
            changeManagerDialog() {
                this.infoManagerDialogVisible = true
            },
            changeManagerSubmit() {
                let params = this.changeInfoManagerForm
                params.id = this.unit_id
                api.updateInfoManager(params).then(res => {
                    if (res.status == 200) {
                        if (res.data.status == 200) {
                            this.infoManagerDialogVisible = false
                            this.changeInfoManagerForm.responsible_user_id = ''
                            this.$message.success(res.data.msg);
                            this.getInfo()
                        } else {
                            if (res.data.status == 401) {
                                this.$router.push('/login');
                            }
                            this.$message.error(res.data.msg);
                        }
                    }
                })
            },
            infoManagerDialogHandleClose() {
                this.infoManagerDialogVisible = false
            },
            initData() {
                clearInterval(this.timer)
                console.log(this.unit_id)
                if (this.unit_id) {
                    this.getInfo();
                    this.getUnitUserList()
                } else {
                    this.timer = setInterval(this.initData, 100)
                }
            },
            getUnitUserList() {
                //获取学校用户列表
                let param = {
                    condition: {
                        unit_id: this.unit_id
                    },
                    page_size: 1000,
                    page_current: 1

                }//获取用户
                api.userInfoOnPage(param).then(res => {
                    if (res.status == 200) {
                        if (res.data.status == 200) {
                            let tempData = JSON.parse(res.data.datas)
                            this.userOptionsList = tempData.items || []
                        }
                    }
                })
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData()
            })
        }

    }
</script>
<style>
    .el-form-item__label {
        color: #666;
    }

    .el-upload-list--text.is-disabled {
        margin-top: -30px
    }

    .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
        /*background-color:#fff;*/
        border-color: #fff;
        color: #999;
        cursor: text;
    }

    .el-radio__input.is-checked.is-disabled .el-radio__inner {
        border-color: #409EFF;
        background: #409EFF;
    }

    .el-radio__input.is-disabled + span.el-radio__label {
        color: #333
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
        border-color: #fff
    }

    .el-radio__inner::after {
        background: #fff !important;
    }

    .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
        background-color: #409EFF;
        border-color: #409EFF;

    }

    .el-form--inline .el-form-item {
        margin-right: 20px;
    }

    .item {
        padding-left: 20px;
    }

    /*.el-input.is-disabled .el-input__suffix{display:none}*/
</style>
<style scoped lang="scss">
    .toggle{
        margin-left:10px;
        cursor: pointer;
        display:inline-block;
    }
    .title .toggle i{
        font-size:20px;
        margin-left:0px;
    }
    .title{
        background: #eee;
        padding:0 20px;
        position:relative;
        margin-bottom:30px;
        text-align:left;
    }
    .title i{
        font-size:12px;
        margin-left:20px;
        font-style: normal;
        color:#999;
    }
    .title .head-right{
        position:absolute;
        right: 5px;
        top: -1px;
    }

    .box-card .title {
        background: #ddd;
        padding-left: 20px;
        margin-bottom: 20px;
    }

    .school {
        padding: 0 20px;
    }

    .info .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
    }

    .info .avatar {
        width: 100px;
        height: 100px;
        display: block;
    }

    /*  .info .el-upload{
          position:relative;
      }
      .info .el-upload .el-icon-plus{
          position:absolute;
          z-index: 100;
          top:0;

      }*/

    .header {
        text-align: right;
    }

    .section {
        margin: 15px 0;
        border-bottom: solid 1px #ccc;
        padding: 15px 0 20px;
    }

    .head-left {

        float: left;
    }

    .school {
        font-size: 16px;
        color: #000;
        /*margin-top:20px;*/

    }

    .avatar {
        width: 80px;
        height: 80px;
        display: block;
    }

    .info {
        padding: 20px 0;

        /*border-bottom: solid 1px #ccc;*/
    }

    .unit-info-manager {
        padding: 0 0 0 50px;
        div {
            display: inline-table;
            padding: 0 15px 0 0;
            font-size: 14px;
            color: #666;
            span {
                color: #333;
            }
        }
    }
</style>
